<script setup lang='ts'>
import { ref, watch } from 'vue'
type defaultValueType = [number, number, number, number]
const props = withDefaults(defineProps<{
    modelValue?: defaultValueType,
    readonly?: boolean,
    type?: string,
}>(), {
    readonly: false,
    //@ts-ignore
    modelValue: [0, 0, 0, 0],
    type: 'rectangle',
})
// console.log(props.type);

const list: any = ref([])
watch(() => props.modelValue, (val) => {
    list.value = []
    if (val) {
        val.forEach((item) => {
            list.value.push(item.toFixed(7))
        })
    } else {
        list.value = [null, null, null]
    }
}, { immediate: true })
const emits = defineEmits(["update:modelValue"]);
const inputHandler = (e: any, numberValues: defaultValueType | undefined, num: number) => {
    if (numberValues === undefined) return
    let numberArr = [...numberValues]
    numberArr[num] = Number(e.target.value)
    emits('update:modelValue', numberArr)


}
// const PositionOrder = ['西', '南', '东', '北']
</script>

<template>
    <div class="readonly_flag" :class="{ 'readonly_true': readonly }" v-if="type === 'rectangle'">
        <div class="input2" style="margin-bottom: 15px;">
            <label for="">{{ '西' }}：</label>
            <input type="number" class="input_number" :disabled="readonly" :value="list[0]" @blur="inputHandler($event, modelValue, 0)"
                step="0.0000001" />
        </div>
        <div class="input2" style="margin-bottom: 15px;">
            <label for="">{{ '东' }}：</label>
            <input type="number" class="input_number" :disabled="readonly" :value="list[2]" @blur="inputHandler($event, modelValue, 2)"
                step="0.0000001" />
        </div>
        <div class="input2" style="margin-bottom: 15px;">
            <label for="">{{ '南' }}：</label>
            <input type="number" class="input_number" :disabled="readonly" :value="list[1]" @blur="inputHandler($event, modelValue, 1)"
                step="0.0000001" />
        </div>
        <div class="input2">
            <label for="">{{ '北' }}：</label>
            <input type="number" class="input_number" :disabled="readonly" :value="list[3]" @blur="inputHandler($event, modelValue, 3)"
                step="0.0000001" />
        </div>
    </div>
    <div class="readonly_flag" :class="{ 'readonly_true': readonly }" v-else>
        <div v-for="(_, index) in modelValue  " class="input3" >
            <input :key="index" type="number" class="input_number" :disabled="readonly" :value="modelValue[index]"
                @blur="inputHandler($event, modelValue, index)" />
        </div>
    </div>
</template>

<style scoped>
.input2 {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 26px;
    color: rgba(230, 230, 230, 1);
}

.input2>label {
    display: inline-block;
    width: 20px;
    height: 26px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    text-align: left;
}

.input3 {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 26px;
    color: rgba(230, 230, 230, 1);
    margin-bottom: 6px;
}

.input2>input {
    display: inline-block;
    /* width: 170px; */
    flex: 1;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}
.input3>input {
    display: inline-block;
    /* width: 190px; */
    flex: 1;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}
input:hover {
    border: 1px solid rgba(44, 104, 247, 1);
}
input:focus{
    border: 1px solid #2c68f7;
}
.readonly_flag {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center; */
}

.readonly_true {
    pointer-events: none;
    user-select: none;
}

input::after {
    content: '°';
}
.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}
</style>
